<template>
  <div class="top">
    <div class="left">
      <div class="box">
        <div class="one">Business</div>
        <div class="two">Shipping & Mailing Solutions for Small to Large Businesses</div>
        <div class="three">Delivering for America™ with innovative solutions for businesses of every size.</div>
        <div class="four">
          <ul>
            <li><b>Shipping:</b> USPS supports small to large business shipping needs. With a free USPS.com business account, you can print your own labels and access the latest features in the 
              <a href="#">enhanced Click-N-Ship® experience.</a>
              </li>
            <li><b>Advertising With Direct Mail:</b> Learn how to create and improve direct mail campaigns to win customers.</li>
            <li><b>More Resources:</b> Get more ways to improve customer service, streamline shipping, and lower costs, including discounted pricing available through 
              <a href="#">USPS Connect® eCommerce</a>.</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="right">
      <img src="../../assets/image/dfa-business.jpg"/>
    </div>
  </div>
  <div class="one">
    <div class="title">Create Your Own Shipping Labels</div>
    <div class="box">
      <div class="left">
        <div class="title"><a href="#">Enhanced Click-N-Ship</a></div>
        <div class="text"><b>With your free USPS.com account, you can pay for postage and print just one label or a batch of shipping labels online.</b> The enha
          nced Click-N-Ship experience includes bulk editing, file upload, and other features for managing more packages. Plus, all customers save on s
          hipping with lower Commercial Rates. Businesses can get additional savings on select services by opting in to the 
          <a href="#">Business Rate Card</a>
          .
          <ul>
            <li>Pay with Apple Pay or an Enterprise Payment System (EPS) account</li>
            <li>Create multiple labels at once and group into shipments</li>
            <li>Ship domestically or internationally</li>
            <li>Get outbound and return labels delivered to your address for a small fee</li>
            <li><a href="#">Visit FAQs to learn more</a></li>
          </ul>
        </div>
      </div>
      <div class="left">
        <div class="title"><a href="#">Business Customer Gateway</a></div>
        <div class="text"><b>For large-volume mailers and shippers,</b> the Business Customer Gateway (BCG) is our central USPS® benefits hub. Take advantage of business services like mail tracking data, APIs, mailing documentation, and more.
          <ul>
            <li>Connect to online tools for business mailers</li>
            <li>Access certain programs and features only available to businesses that meet certain volume shipping requirements</li>
            <li>Sign up for promotions and incentives</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="two1">
    <div class="box">
      <div class="left"><img src="../../assets/image/person-using-laptop.jpg"></div>
      <div class="right">
        <div class="title"><a href="#">Downloadable Desktop Software</a></div>
        <div class="text">Small to medium volume shippers can also use our free Click-N-Ship Business Pro™ desktop software to create labels. Pay for postage via electronic manifest files. Manage your volume shipping with database integration, built-in tracking, and reporting tools.</div>
      </div>
    </div>
  </div>
  <div class="three1">
    <div class="box">
      <div class="left">
        <div class="title">Advertise with Mail</div>
        <div class="text1">
          <div class="one1"><a href="#">Every Door Direct Mail®</a></div>
          <div class="two">Plan a direct mailing online, bring your mailpieces to a Post Office™ location, and then we’ll deliver them along your selected routes.</div>
        </div>
        <div class="text1">
          <div class="one1"><a href="#">Vendors & Resources</a></div>
          <div class="two">Get help from a printer or mail service provider to format your direct mailpiece according to specifications and send it off.</div>
        </div>
        <div class="text1">
          <div class="one1"><a href="#">Available Formats</a></div>
          <div class="two">Find out about available direct mail formats and their benefits, from postcards to brochures, letters to flyers, and more.</div>
        </div>
        <div class="text1">
          <div class="one1"><a href="#">More on Advertising</a></div>
          <!-- <div class="two">Plan a direct mailing online, bring your mailpieces to a Post Office™ location, and then we’ll deliver them along your selected routes.</div> -->
        </div>
      </div>
      <div class="right2"><img src="../../assets/image/business-eddm.jpg"></div>
    </div>
  </div>
  <div class="four">
    <div class="title">Other Business Services</div>
    <div class="big-box">
      <div class="box11" v-for="item in boxList">
        <div class="title1"><a href="#">{{item.title}}</a></div>
        <div class="text">{{item.text}}</div>
    </div>
    </div>
  </div>
  <div class="five">
    <div class="title">Resources</div>
    <div class="big-box">
      <div class="box" v-for="item in list">
        <div class="title"><a href="#">{{item.title}}</a></div>
        <div class="text">{{ item.text }}</div>
      </div>
    </div>
  </div>
  <div class="six">
    <ol>
      <li v-for="item in olList">{{ item.li }}</li>
    </ol>
  </div>
  <!-- <feet></feet> -->
</template>
<script setup>
import feet from '../../components/modules/feet.vue'
import {ref} from 'vue'

const boxList=ref([
  {
    title:'Free Shipping Supplies1',
    text:'Find free supplies to ship your customer orders domestically and internationally. Get Flat Rate products, shipping labels, and more.'
  },
  {
    title:'Discounts for Platforms & Merchants',
    text:'Through the USPS Connect eCommerce program, platforms and marketplaces can get direct access to discounted USPS pricing and other benefits to offer their merchants and online sellers.'
  },
  {
    title:'Bulk Mail Discount',
    text:'Learn about commercial mail classes, prices, and preparation to make the right choice for your business or organization.'
  },
  {
    title:'Postage Rates',
    text:'See starting retail and commercial prices for bulk mail as well as shipping domestic and international packages.'
  },
  {
    title:'Postage Options',
    text:'Pay for postage and print your own shipping labels, use online vendors, lease meters, or print with a permit imprint.'
  },
  {
    title:'Taking Your Business Global',
    text:'Use USPS Global Shipping Software to easily pay for postage and create mailing labels, customs forms, postage statements, and manifests.'
  },
  {
    title:'Schedule a Pickup',
    text:'Save time with package pickups. Request a free pickup during regular mail delivery or pay a fee for pickup at a specific time.2'
  },
  {
    title:'Managing Business Mail',
    text:'Consolidate and forward mail, redirect packages in transit, schedule pickups, or arrange for reply mail with cost-effective and convenient USPS business mail services.'
  },
  {
    title:'Customer Returns',
    text:'Facilitate quick, easy, and hassle-free returns for you and your customers with flexible USPS Returns® services.'
  },
])
const list=ref([
  {
    title:'Developer Resources',
    text:'Use USPS & Web Tools APIs for e-commerce and shipping to calculate prices, verify addresses, track packages, print shipping labels, and check delivery dates.'
  },  
  {
    title:'Marketing Resources',
    text:'USPS Delivers™: See advice, case studies, and how-to articles for improving your shipping and marketing practices to grow your business.'
  },  
  {
    title:'Large Mailer Resources',
    text:'PostalPro™: Search for and access hundreds of how-to documents, fact sheets, user guides, and the latest updates in processing and delivery.'
  },
])
const olList=ref([
  {
    li:'For use with Priority Mail®, Priority Mail International®, Priority Mail Express® and Priority Mail Express International® shipping. Boxes are delivered within the U.S. with your regular mail usually within 7 to 10 business days. Exclusions apply. For details and to order, visit https://store.usps.com/store. Back ^'
  },
  {
    li:'For details on availability, visit usps.com/pickup. Back ^'
  }
])
</script>
<style scoped>
img{
  width: 100%;
  height: 100%;
}
.top{
  width: 100%;
  /* height: 350px; */
  overflow-wrap: break-word;
  background-color: #f7f7f7;
  /* background-color: #333366; */
  /* overflow: hidden; */
  display: flex;
  /* flex-direction: row; */
  .left{
    width: 55%;
    height: 100%;
    /* background-color: yellowgreen; */
    .box{
      width: 630px;
      height: 100%;
      /* background-color: yellow; */
      float: right;
      .one{
        width: 100%;
        height: 50px;
        text-align: left;
        margin-top: 40px;
        /* background-color: antiquewhite; */
        font-family: "HelveticaNeueW02-75Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 32px;
        font-weight: 700;
        line-height: 36px;
        color: #333366;
      }
      .two{
        width: 100%;
        /* height: 40px; */
        overflow-wrap: break-word;
        text-align: left;
        margin-top: 10px;
        font-size: 19px;
        font-weight: 600;
        color: #333366;
      }
      .three{
        width: 100%;
        /* height: 40px; */
        overflow-wrap: break-word;
        text-align: left;
        margin-top: 17px;
        /* background-color: rgb(50, 195, 205); */
      }
      .four{
        width: 610px;
        /* height: 40px; */
        overflow-wrap: break-word;
        /* text-align: left; */
        margin-top: 17px;
        padding-left: 20px;
        /* background-color: yellowgreen; */
        ul li{
          /* background-color: #333366; */
          margin-top: 11px;
          a{
            color: rgb(65, 127, 180);
          }
        }
        margin-bottom: 20px;
      }
    }
  }
  .right{
    width: 45%;
    height: 350px;
    background-color: rgb(202, 125, 23);
  }
}
.one{
  width: 100%;
  /* height: 700px; */
  margin-top: 60px;
  overflow-wrap: break-word;
  /* background-color: yellowgreen; */
  /* display: flex;
  flex-direction: column; */
  .title{
    height: 40px;
    /* background-color: #f7f7f7; */
    text-align: center;
    color: #333366;
    font-size: 27px;
    font-weight: 800;
  }
  .box{
    width: 1170px;
    /* height: 500px; */
    overflow-wrap: break-word;
    /* margin-top: 130px; */
    padding-top: 40px;
    /* background-color: yellow; */
    margin: 0 auto;
    display: flex;
    .left{
      width: 50%;
      /* background-color: #bd0b0b; */
      .title{
        width: 100%;
        height: 40px;
        /* fon */
        /* background-color: #bd0b0b; */
        text-align: left;
        a{
          color: #5186b8;
        }
      }
      .text{
        /* width: 100%; */
        overflow-wrap: break-word;
        margin-top: 15px;
        padding-right: 17px;
        /* background-color: aliceblue; */
        margin-bottom: 20px;
        a{
          color: #395194;
        }
        ul{
          padding-left: 20px;
          li{
            margin-top: 11px;
          }
        }
      }
    }
  }
}
.two1{
  width: 100%;
  /* min-height: 300px; */
  overflow-wrap: break-word;
  background-color: #f7f7f7;
  margin-top: 50px;
  /* margin-bottom: 50px; */
  .box{
    width: 1170px;
    margin: 0 auto;
    /* height: 100%; */
    overflow-wrap: break-word;
    /* background-color: yellowgreen; */
    display: flex;
    .left{
      width: 50%;
      height: 300px;
      /* background-color: #333366; */
    }
    .right{
      width: 48%;
      overflow-wrap: break-word;
      /* background-color: violet; */
      padding:0 20px;
      /* padding: 20px; */
      .title{
        height: 40px;
        /* background-color: #f7f7f7; */
        /* text-align: center; */
        margin-top: 60px;
        font-size: 27px;
        font-weight: 800;
        a{
          color: #5186b8;
        }
      }
      .text{
        width: 100%;
        margin-top: 10px;
        overflow-wrap: break-word;
        /* background-color: yellow; */
        /* padding: 0 10px; */
      }
    }
  }
}
.three1{
  width: 100%;
  /* height: 600px; */
  overflow-wrap: break-word;
  margin-top: 50px;
  background-color: #f7f7f7;
  .box{
    width: 1170px;
    overflow-wrap: break-word;
    margin: 0 auto;
    /* background-color: #5186b8; */
    display: flex;
    .left{
      width: 48%;
      padding: 10px;
      /* background-color: #0d4981; */
      .title{
        width: 100%;
        height: 40px;
        /* background-color: yellowgreen; */
        margin-top: 45px;
        font-size: 26px;
        color: #333366;
        font-weight: 700;
      }
      .text1{
        width: 100%;
        overflow-wrap: break-word;
        /* background-color: yellow; */
        margin-top: 18px;
        margin-bottom: 30px;
        /* margin: 0;
        padding: 0; */
        .one1{
          width: 100%;
          overflow-wrap: break-word;
          /* background-color: violet; */
          margin: 0;
        font-size: 20px;
        font-weight: 600;
        a{
          color: #276197;
        }
        }
      }
    }
    .right2{
      width: 50%;
      height: 600px;
    }
  }
}
.four{
  width: 1160px;
  /* height: 500px; */
  overflow-wrap: break-word;
  /* background-color: yellowgreen; */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  margin-top: 70px;
  .title{
    width: 100%;
    height: 40px;
    /* background-color: yellow; */
    text-align: center;
    font-size: 29px;
    color: #333366;
    font-weight: 700;
  }
  .big-box{
    width: 100%;
    overflow-wrap: break-word;
    /* background-color: #276197; */
    margin-top: 30px;
    /* display: flex; */
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap:10px;
    grid-auto-rows: minmax(100px,auto);
    .box11{
      /* flex: 1; */
      max-width: 360px;
      /* height: 300px; */
      /* min-height: 200px; */
      margin-right: 1px;
      /* ma-bottom: 20px; */
      padding: 0 10px;
      overflow-wrap: break-word;
      /* background-color: violet; */
      float: left;
      display: flex;
      flex-direction: column;
      .title1{
        /* width: 100%; */
        overflow-wrap: break-word;
        /* background-color: aliceblue; */
        margin-top: 10px;
        text-align: center;
        font-size: 26px;
        /* color: #3379a8; */
        font-weight: 700;
        a{
          color: #276197;
        }
      }
      .text{
        width: 100%;
        overflow-wrap: break-word;
        /* background-color: yellow; */
        text-align: center;
        /* flex: 1; */
        margin-top: 5px;
        margin-bottom: 50px;
      }
    }
  }

}
.five{
  
  width: 100%;
  /* height: 500px; */
  overflow-wrap: break-word;
  background-color: #f7f7f7;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  margin-top: 70px;
  .title{
    width: 100%;
    height: 40px;
    /* background-color: yellow; */
    text-align: center;
    font-size: 29px;
    color: #333366;
    font-weight: 700;
    margin-top: 25px;
  }
  .big-box{
    width: 1170px;
    /* height: 300px; */
    overflow-wrap: break-word;
    /* background-color: #276197; */
    margin: 30px auto 0;
    /* display: flex; */
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap:10px;
    grid-auto-rows: minmax(100px,auto);
    .box{
      /* flex: 1; */
      max-width: 360px;
      padding: 0 10px;
      overflow-wrap: break-word;
      /* background-color: violet; */
      float: left;
      display: flex;
      flex-direction: column;
      .title{
        /* width: 100%; */
        overflow-wrap: break-word;
        /* background-color: aliceblue; */
        /* margin-top: 10px; */
        /* margin: 0; */
        margin-top: 10px;
        text-align: center;
        font-size: 26px;
        /* color: #3379a8; */
        font-weight: 700;
        a{
          font-size: 20px;
          color: #276197;
        }
      }
      .text{
        width: 100%;
        overflow-wrap: break-word;
        /* background-color: yellow; */
        text-align: center;
        /* flex: 1; */
        /* margin-top: 5px; */
        margin-bottom: 50px;
      }
    }
  }
}
.six{
  width: 1160px;
  overflow-wrap: break-word;
  /* background-color: #276197; */
  margin: 50px auto 20px;
  ol{
    padding-left: 20px;
    li{
      font-size: 11px;
      font-weight: 600;
      line-height: 20px;
    }
  }
}
</style>